<template>
	<div class="content">
		<div class="doctortext">
			<div class="doctorimg">
				<div class="img"></div>
				<div class="imgtext">
					<div class="imgtext1">赵马</div>
					<div class="imgtext2">主任医师</div>
				</div>
			</div>
			<div class="doctordetail">医生简介：消化系统的疾病的治疗，擅长肝胆疾病的治疗；消化系统的疾病的治疗，擅长肝胆疾病的治疗</div>
			<div class="job">
				<div class='jobcho gr'>糖尿病</div>
				<div class='jobcho or'>尿毒症</div>
				<div class='jobcho re'>肾病</div>
			</div>
		</div>
		<div style="font-size: 15px;padding: 20px 0;">医生全部排版</div>
		<div class="doctortext" style="margin-left: 0;margin-right: 0;">
			<div style="margin-left: 5px;">东院</div>

		</div>
		<div style="background-color: #f8f8f8;">
			<div class="slk">
				<div>
					<div class="kjiw"><span>2020-12-30 周一 </span><span class="day">2天后</span></div>
					<div class="reds">¥60</div>
				</div>
				<div class="buttons" @click='move'>剩余 30</div>
			</div>
		</div>
		<div style="background-color: #f8f8f8;">
			<div class="slk">
				<div>
					<div class="kjiw"><span>2020-12-30 周一 </span><span class="day">4天后</span></div>
					<div class="reds">¥60</div>
				</div>
				<div class="button">预满</div>
			</div>
		</div>
		<div style="background-color: #f8f8f8;">
			<div class="slk">
				<div>
					<div class="kjiw"><span>2020-12-30 周一 </span><span class="day">6天后</span></div>
					<div class="reds">¥60</div>
				</div>
				<div class="buttons">剩余 30</div>
			</div>
		</div>
		<div>
			<div style="font-size: 15px;padding: 20px 0;">更多同科室医生</div>
			<view class="zp" style="margin-bottom: 15px;">
				<div class="clor">
					<div style="width: 48px;height: 48px;border-radius: 5px;background-color: #e6f1ff;"></div>
					<div style="margin-left: 10px;">
						<div><span style="font-size: 15px;">刘萌萌</span><span style="font-size: 12px;margin-left: 5px;">主任医师</span></div>
						<div style="font-size: 12px;color: #7F7F7F;margin-top: 5px;">消化系统的疾病的治疗，擅长肝胆疾病的治疗</div>
					</div>
				</div>
			</view>
			<view class="zp" style="margin-bottom: 15px;">
				<div class="clor">
					<div style="width: 48px;height: 48px;border-radius: 5px;background-color: #e6f1ff;"></div>
					<div style="margin-left: 10px;">
						<div><span style="font-size: 15px;">刘萌萌</span><span style="font-size: 12px;margin-left: 5px;">主任医师</span></div>
						<div style="font-size: 12px;color: #7F7F7F;margin-top: 5px;">消化系统的疾病的治疗，擅长肝胆疾病的治疗</div>
					</div>
				</div>
			</view>
			<view class="zp" style="margin-bottom: 15px;">
				<div class="clor">
					<div style="width: 48px;height: 48px;border-radius: 5px;background-color: #e6f1ff;"></div>
					<div style="margin-left: 10px;">
						<div><span style="font-size: 15px;">刘萌萌</span><span style="font-size: 12px;margin-left: 5px;">主任医师</span></div>
						<div style="font-size: 12px;color: #7F7F7F;margin-top: 5px;">消化系统的疾病的治疗，擅长肝胆疾病的治疗</div>
					</div>
				</div>
			</view>
		</div>
		<view class="zzc" :animation="animationData">
			<div style="position: absolute;top: 8%;right: 15%;"><img src="@/static/icon-close.png" alt="" style="width: 14px;height: 14px;" @click='close'></div>
			<div style="text-align: center;">选择预约时间段</div>
			<div class="toptext">上午号源</div>
			<div style="display: flex;flex-wrap: wrap;margin-top: 15px;">
				<div class='timesr'>9:00 剩余10</div>
				<div class='timesr1'>9:00 剩余0</div>
				<div class='timesr'>9:00 剩余10</div>
				<div class='timesr'>9:00 剩余10</div>
				<div class='timesr'>9:00 剩余10</div>
				<div class='timesr1'>9:00 剩余0</div>
			</div>
			<div class="toptext" style="margin-top: 15px;">下午号源</div>
			<div style="display: flex;flex-wrap: wrap;margin-top: 10px;">
				<div class='timesr'>9:00 剩余10</div>
				<div class='timesr1'>9:00 剩余0</div>
				<div class='timesr'>9:00 剩余10</div>
				<div class='timesr'>9:00 剩余10</div>
				<div class='timesr'>9:00 剩余10</div>
				<div class='timesr1'>9:00 剩余0</div>
				<div class='timesr'>9:00 剩余10</div>
				<div class='timesr'>9:00 剩余10</div>
				<div class='timesr1'>9:00 剩余0</div>
			</div>
		</view>
		<div class="zzcblock" v-if="showzzc"></div>
	</div>
</template>

<script>
		export default{
			data(){
				return{
					animationData:'',
					showzzc:false
				}
			},methods:{
				close() {
					console.log(1)
					this.showzzc=false
					    var animation = uni.createAnimation({
					      duration: 1000,
					        timingFunction: 'ease',
					    })
					    this.animation = animation
						animation.translateY(0).step()
						this.animationData=animation.export()
				},
				move(){
					console.log(1)
					this.showzzc=true
					    var animation = uni.createAnimation({
					      duration: 1000,
					        timingFunction: 'ease',
					    })
					    this.animation = animation
						animation.translateY(-359).step()
						this.animationData=animation.export()
				}
			}
		}
</script>

<style>
	.zzcblock{
		position: absolute;
		top: 0;
		margin-left: -15px;
		background-color: black;
		opacity: 0.5;
		z-index: 889;
		width: 100%;
		padding-bottom: 260%;
	}
	.timesr1{
		margin-right: 5px;
		margin-top: 10px;
		background-color: #f2f2f2;
			width: 110px;
			line-height: 32px;
			    height: 32px;
				text-align: center;
		    font-family: 'PingFangHK-Regular', 'PingFang HK', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 12px;
		    letter-spacing: 1px;
		    color: #aaaaaa;
	}
	.timesr{
		margin-right: 5px;
		margin-top: 10px;
		background-color: #f1f7ff;
			width: 110px;
			line-height: 32px;
			    height: 32px;
				text-align: center;
		    font-family: 'PingFangHK-Regular', 'PingFang HK', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    font-size: 12px;
		    letter-spacing: 1px;
		    color: #006EFF;
	}
	.toptext {
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    color: #7F7F7F;
			font-size: 14px;
	}
	.zzc{
		z-index: 991;
		width: 100%;
		position: fixed;
		bottom: -359px;
		background-color: #ffffff;
		margin-left: -15px;
		padding: 25px 10px;
	}
	.button{
		margin-left: 15px;
		width: 80px;
		line-height: 32px;
		text-align: center;
		font-size: 12px;
		background-color: #f2f2f2;
		color: #aaaaaa;
		border-radius: 5px;
	}
	.buttons{
		margin-left: 15px;
		width: 80px;
		line-height: 32px;
		text-align: center;
		font-size: 12px;
		background-color: #006eff;
		color: #ffffff;
		border-radius: 5px;
	}
	.zipi{
		    letter-spacing: 1px;
		    color: rgba(244, 99, 99, 0.988235294117647);
			font-size: 14px;
	}
	.clor{
		padding:  0  0 15px 0;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f2f2f2;
	}
	.zp{
		padding: 15px;
		border:1px solid #f2f2f2;
		background-color: #ffffff;
	}
	.datrfcolor{
		background-color: #006eff;
				flex: 1;
				font-weight: 200;
				font-size: 24rpx;
				color: rgb(170, 170, 170);
				text-align: center;
				text-align: center;
				border-radius: 40px;
				width: 20rpx;
				height: 32px;
				margin: 40rpx 10rpx 40rpx 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
	}
	.datrfcolo{
		background-color: #e6f1ff;
				flex: 1;
				font-weight: 200;
				font-size: 24rpx;
				color: rgb(170, 170, 170);
				text-align: center;
				text-align: center;
				border-radius: 40px;
				width: 20rpx;
				height: 32px;
				margin: 40rpx 10rpx 40rpx 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
	}
	.name {
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		font-weight: 400;
		font-style: normal;
		color: #AAAAAA;
		font-size: 28rpx;
		margin: 20rpx 0;
	}
	.sourcetitle{
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		font-weight: 400;
		font-style: normal;
		color: #AAAAAA;
		font-size: 28rpx;
	}
	.sthtitle {
		font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: 30rpx;
		margin: 20rpx 0;
	}
	
	.main {
		width: 92%;
		margin: 0 auto;
	}
	
	.timeselect {
		background-color: #fff;
		height: 200rpx;
		border: 1rpx solid #f2f2f2;
	}
	
	.ali {
		display: flex;
		align-items: center;
	}
	
	.flex {
		display: flex;
	}
	
	.flex1 {
		flex: 1;
	}
	
	.izpimg img {
		width: 10px;
		height: 10px;
		margin-right: 30px;
	}
	
	.server1 {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #757575;
		height: 56px;
		line-height: 56px;
		border-bottom: 1px solid rgba(242, 242, 242, 1);
		font-size: 15px;
	}
	
	.conttitle {
		background-color: #f5f9ff;
		height: 180rpx;
		display: flex;
		font-weight: 200;
		border: 1px solid #f2f2f2;
		padding: 20px 10px;
		justify-content: space-between;
		margin-top: 15px;
		box-sizing: border-box;
	}
	
	.mor {
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		font-weight: 200;
		font-style: normal;
		font-size: 12px;
	}
	
	.phone {
		font-weight: 200;
		font-style: normal;
		font-size: 12px;
		color: #AAAAAA;
	}
	
	.name span:nth-child(1) {
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 15px;
		color: #555555;
	}
	
	.name span:nth-child(2) {
		margin-left: 5px;
		font-size: 12px;
		display: inline-block;
		width: 44px;
		height: 18px;
		padding: 2px;
		background-color: #e2edfe;
		text-align: center;
		line-height: 18px;
		border-radius: 10px;
		letter-spacing: 1px;
		color: #006EFF;
	}
	
	.weeklist {
		font-weight: 200;
		font-size: 24rpx;
		color: rgb(170, 170, 170);
		text-align: center;
	}
	
	.date {
		text-align: center;
		background-color: rgba(0, 110, 255, 0.098);
		border-radius: 40px;
		width: 20rpx;
		height: 32px;
		margin: 40rpx 10rpx 40rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.choosed {
		background-color: rgb(0, 110, 255);
	}
	
	.sourcelist {
		float: left;
		width: calc(33% - 10rpx);
		text-align: center;
		background-color: rgba(0, 110, 255, 0.055);
		border-radius: 8rpx;
		box-shadow: none;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 15rpx 0;
	}
	
	.sourcelistmargin {
		margin: 15rpx;
	}
	.button{
		margin-left: 15px;
		width: 80px;
		line-height: 32px;
		text-align: center;
		font-size: 12px;
		background-color: #f2f2f2;
		color: #aaaaaa;
		border-radius: 5px;
	}
	.reds{
		color: #f46565;
		margin: 5px;
	}
	.day{
		display: inline-block;
		background-color: #e5ecf8;
		color: #006eff;
		padding: 3px 10px;
		border-radius: 10px;
		margin-left: 10px;
	}
	.kjiw{
		font-size: 12px;
	}
	.slk{
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.buttons{
		margin-left: 15px;
		width: 80px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		font-size: 12px;
		background-color: #006eff;
		color: #ffffff;
		border-radius: 5px;
	}
	.gr{
		background-color: #ebfbf2;
		color: #4dda8b;
	}
	.or{
		background-color: #fff4eb;
		color: #ffb072;
	}
	.re{
		background-color: #fef0f0;
		color: #f78f8f;
	}
	.jobcho{
		padding: 2px 15px;
		border-radius: 7px;
		margin-right: 14px;
		height: 18px;
		font-size: 12px;
		text-align: center;
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
		    line-height: 18px;
	}
	.job{
		display: flex;
	}
	.doctordetail{
		font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
		    font-size: 12px;
		    color: #7F7F7F;
		    line-height: 22px;
			margin-bottom: 20px;
	}
	.imgtext2{
		    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    color: #AAAAAA;
			font-size: 12px;
			margin-top: 5px;
	}
	.imgtext1{
		font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
		    font-weight: 500;
			font-size: 15px;
	}
	.img{
		width: 48px;
		height: 48px;
		background-color: #e6f1ff;
		border-radius: 5px;
		margin-right: 15px;
	}
	.doctorimg{
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}
	.doctortext{
		border: 1px solid #f2f2f2;
		padding: 20px 15px;
	}
	.content {
		padding: 15px;
	}
</style>